import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link, hashHistory } from 'react-router'
import { Menu, Dropdown, Button, Modal, message,Form,Input } from 'antd'
import {deleteTabList} from 'actions/tabList'
import {
  editpwdfetch
} from 'actions/common'
const confirm = Modal.confirm
const FormItem = Form.Item
@Form.create({})
@connect(
  (state, props) => ({ config: state.config })
)
export default class Header extends Component {
  // 初始化页面常量 绑定事件方法
  constructor(props, context) {
    super(props)
    this.state = {
      loading: false,
      loginflag:false,
      confirmDirty:false,
      staff: {
        onlineCount: '',
        monthCount: '',
        usertable: {
          gxdwqc: '',
          longmobile: '',
          post: '',
          shortmobile: '',
          username: '',
          userid: '',
        },
      },
    }
    this.handleLogout = this.handleLogout.bind(this)
  }
  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('newPwd')) {
      callback('两次密码输入不一样');
    } else {
      callback();
    }
  }
  handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }
  validateToNextPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirmPwd'], { force: true });
    }
    callback();
  }
  // 登出
  handleLogout() {
    const { config } = this.props
    const self = this
    const logOut = () => {
      sessionStorage.removeItem('usercode')
      sessionStorage.removeItem('userpwd')
      sessionStorage.removeItem('token')
      sessionStorage.removeItem('userid')
      sessionStorage.removeItem('divisionid')
      sessionStorage.removeItem('userinfo')
      sessionStorage.removeItem('tabList')
      sessionStorage.removeItem('alarmCall')
      hashHistory.push('/login')
    }
    confirm({
      title: '提示',
      content: '确认退出登录吗？',
      onOk() {
        // self.props.dispatch(fetchLogout({}, (result) => {
        //   // console.log(result)
        //   if (result.status == 1) {
        //     config.staff = {}
        //     hashHistory.push('/login')
        //   } else {
        //     message.error(result.msg)
        //   }
        // }))
        logOut();
        self.props.dispatch(deleteTabList())
      },
    })
  }
  editpwdFn(){
    this.setState({
      loginflag:true
    })
  }
  handleOk = (e) => {
    //修改密码
    this.props.form.validateFields((err, values) => {
      if(!err){
        this.props.dispatch(editpwdfetch(
          {"newPwd":this.props.form.getFieldValue('newPwd'),"confirmPwd":this.props.form.getFieldValue('confirmPwd'),"sourcePwd":this.props.form.getFieldValue('sourcePwd')},
          (respose) => {
            const { config } = this.props
            const self = this
            const logOut = () => {
              sessionStorage.removeItem('usercode')
              sessionStorage.removeItem('userpwd')
              sessionStorage.removeItem('token')
              sessionStorage.removeItem('userid')
              sessionStorage.removeItem('divisionid')
              sessionStorage.removeItem('userinfo')
              sessionStorage.removeItem('tabList')
              sessionStorage.removeItem('alarmCall')
              hashHistory.push('/login')
            }
            logOut();
            self.props.dispatch(deleteTabList())
            this.setState({
              loginflag:false
            })
        }))

      }
    })
    
  }
  handleCancel = (e) => {
    this.setState({
      loginflag:false
    })
  }
  render() {
    const {form } = this.props
    const staff = this.state.staff;
    const { getFieldDecorator } = form;
    const menu = (
      <Menu className="nav-dropmenu">
        <Menu.Item key="0">
          <span className="label">所属单位</span><span>{staff.usertable.gxdwqc}</span>
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="1">
          <span className="label">用户姓名</span><span>{staff.usertable.username}</span>
        </Menu.Item>
        <Menu.Item key="2">
          <div className="label" onClick={this.editpwdFn.bind(this)}>密码修改</div>
        </Menu.Item>
        <Menu.Item key="5">
          <Button type="primary" size="small" onClick={this.handleLogout}>退出登录</Button>
        </Menu.Item>
      </Menu>
    )
    const formItemLayout = {
      labelCol: {
          sm: { span: 4 },
          },
          wrapperCol: {
           sm: { span: 18 },
          },
      };
    const username = sessionStorage.getItem('username')
    return (
      <header id="navbar">
        <div id="navbar-container" className="boxed">
          <div className="navbar-header">
            <Link to={'/'} className="navbar-brand">
              <div className="brand-title">
                <span className="brand-text">慧殡葬后台管理系统</span>
              </div>
            </Link>
          </div>

          <div className="navbar-content clearfix">
            <ul className="nav navbar-top-links pull-right">
              <li className="login-info">
                <Dropdown overlay={menu} trigger={['click']}>
                  <a className="ant-dropdown-link">{username || '用户名'}</a>
                </Dropdown>
              </li>
            </ul>
          </div>
        </div>
        <Modal
                width={550}
                title={"修改密码"}
                visible={this.state.loginflag}
                maskClosable={false}
                onCancel={this.handleCancel}
                onOk={this.handleOk}
                >
                <div>
                    <Form>
                        <FormItem label="旧密码" {...formItemLayout}>
                            {
                                getFieldDecorator('sourcePwd', {
                                rules: [{
                                    required: true,message:"请输入旧密码"
                                }],
                                })(
                                <Input placeholder="请输入旧密码" type="password" size="default" style={{ width: '180px' }} />
                                )
                            }               
                        </FormItem>
                        <FormItem label="新密码" {...formItemLayout}>
                            {
                                getFieldDecorator('newPwd', {
                                rules: [{
                                    required: true,message:"请输入新密码"
                                },{
                                  validator: this.validateToNextPassword,
                                }],
                                })(
                                <Input placeholder="请输入新密码" type="password" size="default" style={{ width: '180px' }} />
                                )
                            }
                        </FormItem>
                        <FormItem label="确认密码" {...formItemLayout}>
                            {
                                getFieldDecorator('confirmPwd', {
                                rules: [{
                                    required: true,message:"请再次输入新密码"
                                }, {
                                  validator: this.compareToFirstPassword,
                                }],
                                })(
                                <Input placeholder="请再次输入新密码"  onBlur={this.handleConfirmBlur} type="password" size="default" style={{ width: '180px' }} />
                                )
                            }
                        </FormItem>
                    </Form>
                </div>
            </Modal>
      </header>
    )
  }
}
